<template>
  <div class="app-container">
    <!-- <div class="top-box"> -->
      <el-select v-model="queryParams.voyageId" filterable placeholder="choose voyage">
        <el-option
          :key="item.voyageId"
          :label="item.vesselName + ' ' + item.voyageNo"
          :value="item.voyageId"
          v-for="item in voyages"
        >
        </el-option>
      </el-select>
        &nbsp;&nbsp;
      <el-button   type="primary" icon="search"  @click="search">Search</el-button>
      &nbsp;&nbsp;
      <el-button   type="primary" @click="handlePrint">Export</el-button>
      &nbsp;&nbsp;
      
    <!-- </div> -->

    <h3 style="text-align: center;" v-if="listData.length>0"><strong>CARGO MANIFEST</strong></h3>
    <div v-for="(item, index) in listData" :key="index" class="item-box">
      <!-- <div class="tip-box">
        <div class="tip-item">
          <div class="title"><strong>MV:</strong></div>
          {{ item.vesselName }}
        </div>
        <div class="tip-item">
          <div class="title"> <strong>MV:</strong> </div>
          {{ item.voyageNo }}
        </div>
        <div class="tip-item">
          <div class="title"> <strong>IMO:</strong></div>
          {{ item.imoNumber }}
        </div>
        <div class="tip-item">
          <div class="title"><strong>FROM:</strong></div>
          {{ item.pol }}
        </div>
        <div class="tip-item">
          <div class="title"><strong>ITO:</strong></div>
          {{ item.pod }}
        </div>
        <div class="tip-item">
          <div class="title"><strong>N.R.T.:</strong></div>
          {{ item.nrt }}
        </div>
      </div> -->
      <el-row>
        <el-col :span="8" class="manifest-tip-item">
          <span class="title"><strong>MV:</strong></span>{{ item.vesselName }}
        </el-col>
        <el-col :span="8" class="manifest-tip-item">
          <span class="title"><strong>MV:</strong></span>{{ item.voyageNo }}
        </el-col>
        <el-col :span="8" class="manifest-tip-item">
          <span class="title"><strong>IMO:</strong></span>{{ item.imoNumber }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="manifest-tip-item">
          <span class="title"><strong>FROM:</strong></span>{{ item.pol }}
        </el-col>
        <el-col :span="8" class="manifest-tip-item">
          <span class="title"><strong>TO:</strong></span>{{ item.pod }}
        </el-col>
        <el-col :span="8" class="manifest-tip-item">
          <span class="title"><strong>N.R.T.:</strong></span>{{ item.nrt }}
        </el-col>
      </el-row>
 
      <el-table stripe :data="item.details" style="width: 100%" :border="true" @sort-change="handleSortChange">
        <el-table-column prop="blNo" label="B/L NO." width="160" />
        <el-table-column prop="marks" label="MARKS & NUMBERS." width="200" />
        <el-table-column prop="goodsDesc" label="DESCRIPTION OF GOODS" width="200" />  
        <el-table-column prop="totalUnits" label="NO.& KIND OF PKGS" width="160" />  
        <el-table-column prop="totalWeight" label="GROSS WEIGHT" width="120" />
        <el-table-column prop="totalVolume" label="MEASUREMENT (M³)" width="120" />
        <el-table-column prop="shipper" label="SHIPPER" width="200" />
        <el-table-column prop="consignee" label="CONSIGNEE" width="200" />
        <el-table-column prop="notifyParty" label="NOTIFY PARTY" width="200" />
        <el-table-column prop="remark" label="REMARKS" width="120" />
        <el-table-column label="Operation" width="90"  fixed="right">
        <template #default="scope">
          <span class="btn-primary" v-if="hasAuth(auth, 'edit')"  @click="editClickEvent(scope.row)">{{ $t("ship.button.edit") }}</span
          > </template>
      </el-table-column>
      </el-table>
    </div> 


    <el-dialog class="edit_dialog" destroy-on-close draggable :title="dialogTitle" v-model="dialogFormVisible">
        <el-form :model="formParam"   ref="custForm">
          <el-row>
            <el-col :span="24">
              <el-form-item label="MARKS & NOS." label-width="220px" prop="marks" required>
                <el-input type="textarea" v-model="formParam.marks"></el-input>
              </el-form-item>
            </el-col> 
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="DESCRIPTION OF GOODS" label-width="220px" prop="goodsDesc" required>
                <el-input type="textarea" v-model="formParam.goodsDesc"></el-input>
              </el-form-item>
            </el-col>
          </el-row> 
          <el-row>
            <el-col :span="24">
              <el-form-item label="REMARKS" label-width="220px" prop="remark" >
                <el-input type="textarea" v-model="formParam.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row> 
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">{{ $t("ship.button.cancel") }}</el-button>
            <el-button @click="resetForm" type="warning">{{ $t("ship.button.reset") }}</el-button>
            <el-button type="primary" @click="submitForm">{{ $t("ship.button.submit") }}</el-button>
          </span>
        </template>
    </el-dialog>
  </div> 
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { downloadFile } from "@/utils/downloadFile";
import service from "@/utils/request";  
import { hasAuth } from "@/utils/auth";
import { useMixinAuth } from "@/components/mixin/auth.js";
const auth = useMixinAuth();
onMounted(() => {
  getVoyageList(); 
  refreshTable();
});

const handlePrint = ()=>{

}
let voyages = ref([] as any);
// 请求搜索下来条件
const getVoyageList = async () => {
  const { data } = await service.get("/shipping/voyage/list", {
    params: { status: 0 }
  });
  if (data) {
    voyages.value = data;
  }
};


const total = ref(0);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  voyageId: null,
  status: 1,
  orderByColumn: undefined,
  isAsc: undefined
});

const listData = ref([]);

// 搜索列表
const refreshTable = async () => {
  let result = await service.get("/shipping/manifest/pol/getTable", {
    params: queryParams,
  });
  listData.value =result.data;  
  total.value = result.total
};

const custForm = ref(null);
const dialogTitle = ref("");
const initForm = {
  id: null,
  totalWeight: null,
  totalUnits: null,
  totalVolume: null,
  shipper: null,
  consignee: null,
  marks: null,
  goodsDesc: null,
  remark: null
}

const formParam = reactive(Object.assign({}, initForm));
const dialogFormVisible = ref(false);

const editClickEvent = (row: any) => {
  dialogTitle.value = "update manifest";
  dialogFormVisible.value = true;
  Object.keys(initForm).forEach(k => (formParam[k] = row[k]));
  isAdd = false;
};

let isAdd = false;
const pageQuery = async e => {
  queryParams.pageNum = e.page;
  queryParams.pageSize = e.limit;
  refreshTable();
};

const search = () => {
  if (queryParams.voyageId == null) {
    return;
  }
  refreshTable();
};

function handleExport() {
  downloadFile("sales/shipping/manifest/export", queryParams, `${new Date().getTime()}MANIFEST.xlsx`); 
}


const handleSortChange = async (column: any) => {
  queryParams.orderByColumn = column.prop;
  queryParams.isAsc = column.order; //动态取值排序顺序
  refreshTable();
};

const resetForm = () => {
  // @ts-ignore
  custForm.value.resetFields();
};

const submitForm = async() => {
  await service[ "put"]("shipping/booking/manifest", formParam);
  // @ts-ignore
  ElNotification.success({
        title: "Prompt information",
        message: "save successful!",
        position: "bottom-right"
      });
  refreshTable()  
}  
</script>
<style lang="scss" scoped>
.manifest-tip-item {
  padding: 20px;
  .title {
    display: inline-block;
    width: 100px;
  }
}
</style>